@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');


.section0 {
    position: relative;
    z-index: 2;
    height: auto;
}

.faixabanner {
    position: absolute;
    top: 0vw;
    left: 0vw;
    height: 60vw;
    width: 100vw;
    background: rgb(5,28,44);
    background: linear-gradient(180deg, rgba(5,28,44,1) 0%, rgba(2,18,29,0.36182598039215685) 54%, rgba(1,12,19,0) 90%);
    z-index: 2;
    margin-bottom: -60vw;

}

.banner {
    position: absolute;
    top: 0vw;
    left: -3vw;
    height: 100%;
    max-width: none;
    width: 110vw;
    object-fit: cover;

}

.bannerctn {
    position: relative;
    width: 100vw;
    height: 46vw;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 0vw;
}

.faixa0 {
    position: relative;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 18%, rgba(188,194,199,1) 42%, rgba(5,30,47,1) 77%, rgb(0, 0, 0) 88%);
    height: 20vw;
    border: none;
    z-index: 0;
    margin-top: 0vw;
    margin-bottom: -0vw;
}

.textos0 {
    position: relative;
    width: 0vw;
    height: 0vw;
}
.textofixo {
    position: relative;
    top: -35vw;
    left: 5vw;
    background: transparent;
    font-family: 'Open Sans';
    width: 48vw;
    height: auto;
    font-weight: 300;
    font-size: 3rem;
    text-align: left;
    color: hsl(0, 0%, 100%);
    z-index: 2;
}


.textoanimado {
    position: relative;
    top: -35vw;
    left: 5vw;
    content: "";
    background: transparent;
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 3rem;
    text-align: justify;
    color: #0063e4;
    width: 0;
    z-index: 2;

}

.textoanimado::before {
    position: relative;
    display: block;
    content: "";
    background-color: transparent;
    height: 100%;
    width: 2ch;
    overflow: hidden;
    animation: palavrasselect 12s steps(20) infinite, cursor 1.6s infinite;
    z-index: 2;
}



@keyframes cursor {
    0%,50%{
        border-right: none;
    }
    51%,100%{
        border-right: 2px solid #fff;
    }
}

@keyframes palavrasapagando {
    0%{
        content: "visibilidade";
        width: 0ch;
    }
    10%,23%{
        content: "visibilidade";
        width: 9.2ch;
    }
    24%{
        content: "visibilidade";
        width: 0ch;
    }
    25%{
        content: "conversões";
        width: 0ch;
    }
    35%,48%{
        content: "conversões";
        width: 9.4ch;
    }
    49%{
        content: "conversões";
        width: 0ch;
    }
    50%{
        content: "resultados";
        width: 0ch;
    }
    60%,73%{
        content: "resultados";
        width: 8.7ch;
    }
    74%{
        content: "resultados";
        width: 0ch;
    }
    75%{
        content: "equity!";
        width: 0ch;
    }
    85%,98%{
        content: "equity!";
        width: 7ch;
    }
    100%{
        content: "equity!";
        width: 0ch;
    }
}

@keyframes palavrasselect {
    0%{
        content: "visibilidade";
        width: 0ch;
        background-color:transparent;
        color: #0063e4;
        
    }
    10%,23%{
        content: "visibilidade";
        width: 9.2ch;
        background-color:transparent;
        color: #0063e4;
    }
    23.1%,24.99%{
        content: "visibilidade";
        width: 9.2ch;
        background-color:#0063e4;
        color: #ffffff;
    }
    25%{
        content: "conversões";
        width: 0ch;
        background-color:transparent;
        color: #0063e4;
    }
    35%,48%{
        content: "conversões";
        width: 9.4ch;
        background-color:transparent;
        color: #0063e4;
    }
    48.01%, 49.99%{
        content: "conversões";
        width: 9.4ch;
        background-color:#0063e4;
        color: #ffffff;
    }
    50%{
        content: "resultados";
        width: 0ch;
        background-color:transparent;
        color: #0063e4;
    }
    60%,73%{
        content: "resultados";
        width: 8.7ch;
        background-color:transparent;
        color: #0063e4;
    }
    73.01%, 74.99%{
        content: "resultados";
        width: 8.7ch;
        background-color:#0063e4;
        color: #ffffff;
    }
    75%{
        content: "equity!";
        width: 0ch;
        background-color:transparent;
        color: #0063e4;
    }

    85%,98%{
        content: "equity!";
        width: 5ch;
        background-color:transparent;
        color: #0063e4;
    }
    98.01%, 99.99%{
        content: "equity!";
        width: 5ch;
        background-color:#0063e4;
        color: #ffffff;
    }
    100%{
        content: "equity!";
        width: 0ch;
        background-color:#0063e4;
        color: #ffffff;
    }
}

.section1 {
    position: relative;
    top: 0vw;
    height: auto;
    z-index: 3;

}

.section2 {
    position: relative;
    height: auto;
}

.t1 {
    position: relative;
    top: -8vw;
    left: 10vw;
    font-size: 2.5rem;
    width: 80vw;
    color: #0063e4;
    font-family: 'Open Sans';
    font-weight: 600;
    letter-spacing: 0.2vw;
    text-align: center;
}

.t2 {
    position: relative;
    top: 0vw;
    left: 0vw;
    font-size: 3rem;
    width: 78vw;
    color: #313131;
    font-family: 'Open Sans';
    font-weight: 600;
    letter-spacing: 0.2vw;
    text-align: center;
}

.t3 {
    position: relative;
    top: -7vw;
    left: 11vw;
    font-size: 1rem;
    width: 78vw;
    color: #4d4d4d;
    font-family: 'Open Sans';
    font-weight: 500;
    letter-spacing: 0.1vw;
    text-align: center;
}

.t4 {
    position: relative;
    top: -2vw;
    left: 11vw;
    font-size: 2rem;
    width: 78vw;
    color: rgb(5,28,44);
    font-family: 'Open Sans';
    font-weight: 600;
    letter-spacing: 0.2vw;
    text-align: center;
}

.buttonfont {
    font-size: 1rem;
}
.button-trafegopago {
position: relative;
top: -4vw;
left: 41.5vw;
background-color: #051c2c;
border: 0 solid #000000;
width: 17vw;
height: 4vw;
border-radius:  0.5vw;
box-sizing: border-box;
color: #ffffff;
font-family: 'Open Sans';
font-weight: 600;
cursor: pointer;
display: inline-block;
line-height: 1px;
text-align: center;
transition: all .1s cubic-bezier(.4, 0, .2, 1);
box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
touch-action: manipulation;
transition: all 0.1s ease-in-out;
}

.button-trafegopago:hover {
background-color: #ffffff;
color: #051c2c;
border: 0.1vw solid #000000;
}

.grafico {
    position: relative;
    top: 2vw;
    width: 100vw;
    opacity: 20%;
}

.iconetrafego1 {
    position: relative;
    top: -31vw;
    left: 15vw;
    width: 8vw;
    margin-bottom: -31vw;
}

.s {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.s1 {
    position: relative;
    top: 1vw;
    left: 0vw;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 1.5rem;
    width: 26.66vw;
    text-align: center;
    margin-left: 5vw;
    margin-bottom: 2vw;
    color: #000000;
}


.s11 {
    position: relative;
    top: 0vw;
    left: 0vw;
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 1rem;
    color: #313131;
    width: 26.66vw;
    height: auto;
    text-align: justify;
    margin-left: 5vw;

}


.section3 {
    position: relative;
    border-top-right-radius: 0vw;
    border-top-left-radius: 0vw;
    background: transparent;
    height: auto;
    color: #ffffff;
}   


.t1rbc {
    position: relative;
    top: 0vw;
    left: 10vw;
    width: 78vw;
    font-family: 'Open Sans';
    color: #051c2c;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.2vw;
    text-align: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.t2rbc {

    position: relative;
    top: 0vw;
    left: 0vw;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 2rem;
    color: #051c2c;
    letter-spacing: 0.2vw;
    text-align: center;
}

.video3ctn {
    position: relative;

}

.video3 {
    position: absolute;
    width: 100vw;
    height: 35vw;
    object-fit: cover;
    border-radius: 0vw;
    filter: brightness(1.3);
    transform: scaleX(-1);
}

.video3desktop {
    display: block;
}

.video3mobile {
    display: none;
}

.blurbox {
    position: relative;
    left: 50vw;
    background: #0000008c;
    filter: blur(10);
    width: 50vw;
    height: 35vw;
}

.box3 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
    overflow-x: hidden;
}

.t3rbc {
    position: relative;
    top: 1vw;
    left: 0vw;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 1.5vw;
    color: #ffffff;
    width: 44.5vw;
    height: auto;
    letter-spacing: 0.1vw;
    text-align: center;
    margin-top: 1vw;
    margin-left: 2.5vw;
}

.t4rbc {
    position: relative;
    top: 2vw;
    left: 0vw;
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 0.95vw;
    color: #ffffff;
    width: 44.5vw;
    height: auto;
    letter-spacing: 0.1vw;
    text-align: justify;
    margin-top: 1vw;
    margin-left: 2.5vw;
}

.section4 {
    position: relative;
    background-color: #ffffff;
    height: auto;
}

.p1 {
    position: relative;
    top: 3vw;
    left: 10vw;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 2rem;
    color: #051c2c;
    width: 80vw;
    letter-spacing: 0.2vw;
    text-align: center;
}

.p2 {
    position: relative;
    top: 3.5vw;
    left: 19vw;
    font-family: 'Open Sans';
    font-weight: 500;
    font-size: 1rem;
    color: #4d4d4d;
    width: 60vw;
    height: 3vw;
    letter-spacing: 0.2vw;
    text-align: center;
}

.p3 {
    position: relative;
    top: 6vw;
    left: 5vw;
    font-family: 'Open Sans';
    font-weight: 500;
    font-size: 1rem;
    color: #000000;
    width: 90vw;
    height: auto;
    letter-spacing: 0.1vw;
    text-align: justify;
    margin-bottom: 7vw;
}

.pngfooter {
    position: relative;
    bottom: -1vw;
    left: 0;
    width: 100vw;
}

.logos {
    position: relative;
    left: 8vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.logoads {
    position: relative;
    top: 1vw;
    left: 6vw;
    width: 10vw;
    margin-right: 10.4vw;
    height: auto;
}


.section5 {
    background-color: #ffffff;
    height: auto;

}

.titulo3 {
    position: relative;
    top: 3vw;
    left: 5vw;
    width: 90vw;
    text-align: center;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 1.5rem;
    color: #051c2c;
}

.box {
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.box1 {
    position: relative;
    top: 6vw;
    left: 2.5vw;
    display: flex;
    flex-direction: column;
    width: 20vw;
    height: auto;
    background: #051c2c;
    border-radius: 1.6vw;
    color: #ffffff;
    margin-left: 2.7vw;
    margin-bottom: 11vw;
}

.d1 {
    position: relative;
    top: 2vw;
    left: 2.5vw;
    width: 15vw;
    text-align: center;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 1.1rem;
    color: #ffffff;
}

.db1 {
    position: relative;
    top: 4vw;
    left: 2.5vw;
    width: 15vw;
    text-align: justify;
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 7vw;
}

.icone1 {
    position: relative;
    top: 1vw;
    left: 0vw;
    height: 8vw;
}

.icone2 {
    position: relative;
    top: 2vw;
    left: 0vw;
    height: 7vw;
    margin-bottom: 1vw;
}

.box1:hover {
    box-shadow: 2px 2px 10px #3e3e3e;
}

.vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}


.scroll_ball {
    display: none;
    position: relative;
    width: 20vw;
    height: 10px;
    left: 50vw;
    top: 0vh;
    margin-bottom: 5vh;
}

.ball {
    display: none;
    position: relative;
    left: -35px;
    top: 0;
    background: #727272;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    
}

.ball_activated {
    background: #fff;
    border: 2px solid #4a4a4a;
}

@media (max-width: 768px) {

    * {
        max-width: 100vw;
    }

    .textofixo {
        left: 5vw;
        top: 0vw;
        font-size: 2rem;
        width: 90vw;
        text-align: center;
        margin-top: -60vh;
    }

    .textoanimado {
        left: 5vw;
        top: 0vw;
        width: 90vw;
        font-size: 2rem;
        font-weight: 400;
        text-shadow: #000000 0vw 0vw 0.8vw;
        justify-items: center;
    }

    .section0 {
        height: auto; 
        margin-bottom: 52vh;  
    }

    .faixabanner {
        height: 60vh;
    }

 

    .banner {
        max-width: none;
        left: -20vw;
        width: auto;
        transform: translateX(-50%);
        left: 63%;
    }

    .bannerctn {
        height: 70vh;
    }

    .faixa0 {
        top: 52vh;
        margin-top: 7vh;
    }

    .t1 {
        top: 0;
        left: 5vw;
        font-size: 1.5rem;
        width: 90vw;
        text-align: center;
        margin-bottom: 2vh;
    }

    .t2 {
        font-size: 2rem;
        left: 5vw;
        width: 90vw;
    }

    .t3 {
        top: -4vw;
        left: 10vw;
        font-size: 1rem;
        width: 80vw;
        text-align: justify
    }

    

    .button-trafegopago {
        width: 90vw;
        top: 2vw;
        left: 5vw;
        height: 8vw;
        margin-bottom: 4vh;
    }

    .buttonfont {
        font-size: 3.5vw;
    }
    

    .t4 {
        font-size: 5vw;
    }

    .iconetrafego1 {
        top: 0vw;
        width: 20vw;
        left: 40vw;
        margin-bottom: 2vh;
    }

    .s {
        position: relative;
        top: -14vh;
        flex-direction: column;
        margin-bottom: -14vh;
    }

    .s1 {
        top: 0vw;
        left: 6vw;
        font-size: 1.5rem;
        width: 80vw;
        text-align: center;
        margin-bottom: 1vh;
    }

    .s11 {
        top: 0vw;
        left: 5vw;
        border: 0px solid #000000;
        height: auto;
        font-size: 1rem;
        width: 80vw;
        margin-bottom: 8vh;
    }

    .t1rbc {
        top: 1vh;
        font-size: 1rem;
        margin-bottom: 3vh;
    }

    .t2rbc {
        font-size: 1.5rem;
    }
    
    .video3ctn {
        display: inline-block;
        height: 140vh;
        width: 100vw;
        overflow: hidden;
        top: 140vh;
        margin-top: -140vh;
    }

    .video3 {
        max-width: none;
        left: 0vw;
        width: auto;
        height: 100%;
        transform: translateX(0vw);        
    }

    .box3 {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        overflow-y: hidden;
    }

    .blurbox {
        top:0vh;
        left: 0;
        height: auto;
        width: 100vw;
        background: #000000b8;
        margin-bottom: 0vh;
        overflow-y:scroll;
    }

    .video3desktop {
        display: none;
    }
    
    .video3mobile {
        display: block;
    }

    .t3rbc {
        top: 3vw;
        left: 10vw;
        width: 80vw;
        font-size: 1.3rem;
        text-align: center;
    }
    
    .t4rbc {
        top: 8vw;
        left: 8vw;
        width: 80vw;
        font-size: 1rem;
        margin-bottom: 15vw;
    }

    


    .p1 {
        top: 8vw;
        left: 10vw;
        font-size: 6vw;
        width: 80vw;
    }

    .p2 {
        top: 10vw;
        left: 10vw;
        font-size: 4.5vw;
        width: 80vw;
    }

    .p3 {
        top: 26vw;
        left: 10vw;
        font-size: 4vw;
        width: 80vw;
        margin-bottom: 30vw;
    }

    .box {
        width: 400vw;        
    }

    .box1 {
        position: relative;
        max-width: none;
        left: 0vw;
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
        padding-right: 10vw;
        transition: all 0.5s ease-in-out;
    }

    .d1 {
        left: 5vw;
        width: 80vw;
    }

    .db1 {
        left: 5vw;
        width: 80vw;
    }

    .icone1 {
        left: 5vw;
    }

    .icone2 {
        left: 5vw;
    }

    .scroll_ball {
        display: block;
    }

    .ball {
        display: block;
    }

    .logos {
        left: 0;
        flex-direction: column;
    }
    .pngfooter {
        top: 0vw;
    }

    .logoads {
        left: 10vw;
        width: 35vw;
        margin-bottom: 10vw;
    }

}